<template>
	<div class="home-page w-full h-full">
		<ly-tools-bar>
			<template #right>
				<div
					title="保存笔记"
					@click="handleSave"
					class="item h-7 cursor-pointer rounded-md overflow-hidden">
					<div
						class="w-full px-2 h-full flex items-center justify-center duration-300 text-blue-500 hover:bg-blue-500 hover:text-white">
						<i class="bi bi-sticky-fill text-sm mr-1 text-green-500"></i>
						<span class="text-xs text-green-500">保存</span>
					</div>
				</div>
				<div title="删除笔记" class="item h-7 cursor-pointer rounded-md overflow-hidden">
					<div
						@click="deleteDialogVisible = true"
						class="w-full px-2 h-full flex items-center justify-center duration-300 text-blue-500 hover:bg-blue-500 hover:text-white">
						<i class="bi bi-trash3-fill text-sm mr-1 text-red-500"></i>
						<span class="text-xs text-red-500">删除</span>
					</div>
				</div>
				<div
					title="笔记详情"
					@click="infoDialogVisible = true"
					class="item h-7 cursor-pointer rounded-md overflow-hidden">
					<div
						class="w-full px-2 h-full flex items-center justify-center duration-300 text-blue-500 hover:bg-blue-500 hover:text-white">
						<i class="bi bi-info-circle-fill text-sm mr-1 text-gray-500 dark:text-gray-300"></i>
						<span class="text-xs text-gray-500 dark:text-gray-300">详情</span>
					</div>
				</div>
			</template>
		</ly-tools-bar>
		<div class="title-input w-full">
			<ly-input v-model="noteStore.activeNote.title" :height="48" bold :font-size="18" />
		</div>
		<!-- 编辑器 -->
		<div class="editor">
			<vditor v-model="noteStore.activeNote.content" />
		</div>
	</div>
	<ly-dialog v-model="deleteDialogVisible" title="警告">
		<div class="text-center text-red-500">笔记删除后将无法恢复，是否确认删除？</div>
		<template #footer>
			<ly-button class="mr-2" @click="deleteDialogVisible = false" text="取消" type="default" />
			<ly-button @click="handleDelete" text="确认删除" type="primary" />
		</template>
	</ly-dialog>
	<ly-dialog v-model="infoDialogVisible" title="笔记信息">
		<div class="p-3 text-gray-700 dark:text-gray-300">
			<span>ID：{{ noteStore.activeNote.id }}</span>
		</div>
		<div class="p-3 text-gray-700 dark:text-gray-300">
			<span>标题：{{ noteStore.activeNote.title }}</span>
		</div>
		<div class="p-3 text-gray-700 dark:text-gray-300">
			<span>创建时间：{{ noteStore.activeNote.createTime }}</span>
		</div>
		<div class="p-3 text-gray-700 dark:text-gray-300">
			<span>最后修改时间：{{ noteStore.activeNote.updateTime }}</span>
		</div>
	</ly-dialog>
</template>

<script name="Home" lang="ts" setup>
import { throttle } from 'lodash';
import tip from '@/utils/util.tip';
import { useNoteStore } from '@/stores/noteStore';
import Vditor from '@/components/Viditor/index.vue';
import LyDialog from '@/components/LyDialog/index.vue';

const noteStore = useNoteStore();

// 保存
const t_handleSave = (): void => {
	// 字段校验
	if (
		noteStore.activeNote.title.trim().length < 1 ||
		noteStore.activeNote.content.trim().length < 1
	) {
		tip.error('笔记标题或笔记内容不能为空');
		return;
	}

	if (noteStore.editorStatus === 'create') {
		// 创建笔记
		noteStore.createNote({
			title: noteStore.activeNote.title,
			content: noteStore.activeNote.content,
		});
	} else {
		// 更新笔记
		noteStore.updateNote();
		tip.success('笔记更新成功');
	}
};
const handleSave = throttle(t_handleSave, 1000);

// 删除
const deleteDialogVisible = ref<boolean>(false);
const handleDelete = (): void => {
	noteStore.deleteNode(noteStore.activeNote.id);
	deleteDialogVisible.value = false;
};

// 笔记信息弹窗
const infoDialogVisible = ref<boolean>(false);
</script>

<style lang="scss" scoped>
// 编辑器
.editor {
	height: 100%;
}

.item {
	margin: 0 5px;

	&:hover {
		box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
	}
}
</style>
